<template>
	<div :class="[{view:true},{on:isOn}]">
        <div class="container">
        	<div class="find">
        		<div class="sort-wrap">
        			<ul class="col-5">
        				<li class="on"><a href="">最新</a></li>
        				<li><a href="">销量</a></li>
        				<li><a href="">折扣</a></li>
        				<li><a href="" class="sort-price">价格</a></li>
        				<li>
        					<div class="sort-filter" data-click="view,sidebar" v-on:click="onMask">筛选</div>
        				</li>
        			</ul>
        		</div>
        		<div class="prod-list">
	        		<ul class="col-2">
	        			<li v-for="(item,index) in 6">
	        				<router-link to="/aa/details">
	        					<img src="/static/images/p10.png" alt="">
	        					<div class="info">
		        					<p class="fz26">无印良品</p>
		        					<p class="fz24 gray">鱿鱼丝</p>
		        					<p class="fz28">￥23</p>
	        					</div>
	        					<!--    如果有折扣在这里加上这个div    -->
	                            <div class="sale-tag" v-show="index==0">3折</div>
	        				</router-link>
	        			</li>
	        		</ul>
        		</div>
        		<div class="weui-loadmore">            	
	            	<i class="weui-loading"></i>
	            	<span class="weui-loadmore__tips">正在加载</span>
	            </div>
        	</div>
        </div>   
        <div v-bind:class="[{ sidebar: true },{ 'sidebar-filter': true },{on:isOn}]" data-click="view,sidebar">
        	<div class="sidebar-wrap" v-on:click="mask">
        		<div class="sidebar-content" data-prevent>
	        		<div class="select select-type">
	        			<h3>类别</h3>
	        			<ul class="justify">
	        				<li>零食</li>
	        				<li>美妆</li>
	        				<li>服饰</li>
	        				<li>玩具</li>
	        			</ul>
	        		</div>
	        		<div class="select select-price">
	        			<h3>价格</h3>
	        			<div class="input-wrap justify">
	        				<input class="input-min" placeholder="最低价" type="num">
	        				<input class="input-max" placeholder="最高价" type="num">
	        			</div>
	        		</div>
	        		<div class="btn-wrap col-2">
	        			<a class="reset" href="javascript:;">重置</a>
	        			<a class="submit" href="javascript:;">确认</a>
	        		</div>
        		</div>
        	</div>
        </div>
    </div>
</template>

<script>
	export default {
		name:'find',
		data () {
			return {
				isOn:false,
			}
		},
		methods:{
			onMask () {
				this.isOn=true
			},
			mask () {
				this.isOn=false
			}
		}
	}
</script>

<style scoped>
	
</style>